<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { Calendar, Delete, Plan, Plus } from '@icon-park/vue-next'
import useLog from '@renderer/composables/useLog'
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import { ref } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'

const router = useRouter()
const search = ref('')
const activeId = ref(1)

const { all, add, del, logs } = useLog()
const change = async () => {
  await all({ date: search.value })
}
const addLog = async () => {
  const id = (await add()) as number
  await all()
  router.push({ name: 'log', params: { id } })
}
const delLog = async (id: number) => {
  await ElMessageBox.confirm('确认删除', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await del(id)
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消'
      })
    })
  await all()
}
all()
</script>

<template>
  <div class="main">
    <div class="search">
      <el-input
        v-model="search"
        placeholder="搜索..."
        clearable
        :suffix-icon="Search"
        @input="change"
      />
      <el-button type="primary" @click="addLog">
        <Plus theme="outline" size="18" fill="#fff" />
      </el-button>
    </div>
    <div class="date">
      <el-scrollbar class="scroll">
        <div v-for="item in logs" key="id">
          <div :class="{ active: activeId === item.id }" class="item">
            <RouterLink
              :to="{ name: 'log', params: { id: item.id } }"
              class="link"
              @click="activeId = item.id"
            >
              <Calendar theme="outline" size="18" v-if="activeId !== item.id" />
              <Plan theme="outline" size="18" v-if="activeId === item.id" />
              <div>
                {{ dayjs(item.date).format('YYYY年MM月DD日') }}
              </div>
            </RouterLink>
            <el-button size="small" @click="delLog(item.id)" link class="btn">
              <Delete theme="outline" size="14" />
            </el-button>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="content">
      <RouterView />
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  @apply w-full h-full bg-slate-200;
  display: grid;
  grid-template:
    'search content' 50px
    'date content' auto/190px 1fr;
  .search {
    @apply flex items-center px-2 py-1 gap-1;
  }
  .date {
    @apply overflow-y-auto;
    .scroll {
      @apply h-full;
      .item {
        @apply px-2 text-sm py-2 cursor-pointer flex items-center justify-between mx-2;
        &.btn {
          // @apply opacity-0;
        }
        &:hover {
          @apply bg-slate-300 rounded-md;
          .btn {
            @apply block;
          }
        }
        &.active {
          @apply bg-slate-400 rounded-md text-white;
          .btn {
            // @apply block text-white;
          }
        }
        .link {
          @apply flex gap-2;
        }
        .btn {
          @apply hidden;
        }
      }
    }
  }
  .nav {
    @apply border-t flex items-center gap-4 justify-center cursor-pointer;
  }
  .content {
    grid-area: content;
  }
}
</style>
